<script type="text/javascript">
var img_num_total = '';
jQuery().ready(function($){
	$().calPrice();
	$('.cal-input').change(function(){
		$().calPrice();
	});
});
;(function($){
	$.fn.extend({
		calPrice:function(){
			var borrow_how_much = parseInt($('input[name=borrow_how_much]').val());
			var deposit_how_much = parseInt($('input[name=deposit_how_much]').val());
			var repayment_how_many = parseInt($('input[name=repayment_how_many]').val());
			var is_new = $('input[name=is_new]:checked').val();
			var credit_status = $('input[name=credit_status]').val();
			var apr = 0;
			if(credit_status == "It's Very Poor"){
				apr = 25.99;
			}else if(credit_status == "It's Poor"){
				apr = 15.99;
			}else if(credit_status == "It's Fair"){
				apr = 10.99;
			}else if(credit_status == "It's Good"){
				apr = 8.99;
			}else if(credit_status == "It's Excellent"){
				apr = 7.99;
			}
			if(is_new == 0){
				apr = apr + 1;	
			}
			
			var temp_num = borrow_how_much
			if(deposit_how_much){
				temp_num = temp_num - deposit_how_much;
			}
			monthly_repayment = $().accNum(temp_num, repayment_how_many);
			total_payable = temp_num;//don't know how to cal with the apr;
			$('#borrown_amount').html('&pound;' + $().formatNum(temp_num));
			$('#total_payable').html('&pound;' + $().formatNum(total_payable));
			$('#monthly-repayment').html('&pound;' + $().formatNum(monthly_repayment));
			$('#apr').text($().formatNum(apr));
			
		},
		formatNum:function(s){
			n = 2;
			s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
			var l = s.split(".")[0].split("").reverse(),
			r = s.split(".")[1];
			t = "";
			for(i = 0; i < l.length; i ++ )
			{
				t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
			}
			return t.split("").reverse().join("") + "." + r;  
		},
		accNum:function(arg1, arg2){
			//解决JS数值计算溢出导致数值精度偏差的问题
			if(!arg2){
				arg2 = 1;
			}
			var t1=0,t2=0,r1,r2;  
		    try{t1=arg1.toString().split(".")[1].length}catch(e){}  
		    try{t2=arg2.toString().split(".")[1].length}catch(e){}  
		    with(Math){  
		        r1=Number(arg1.toString().replace(".",""))  
		        r2=Number(arg2.toString().replace(".",""))  
		        return (r1/r2)*pow(10,t2-t1);
		    }
		}
	});
})(jQuery);
</script>
<div class="title_page title_page2">
  <h3>
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
      <tbody>
        <tr>
          <td>Finance Calculator</td>
          <td align="right"></td>
        </tr>
      </tbody>
    </table>
  </h3>
</div>
<div class="normal3 book_service finance">
  <div class="border3"></div>
  <div class="box3_c">
    <div class="downloads ">
      <table width="700" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><h4>Finance Calculator</h4>
            <h3 class="contact_des">Please fill in all of the options below and we will provide you with our best possible finance</h3></td>
          <td><img src="<?php echo $this->getSkinUrl('images/');?>black_horse_img.jpg"/></td>
        </tr>
      </table>
      <div class="normal2">
        <div class="border2"></div>
        <div class="box2_c">
          <table class="list_t" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="step"><img src="<?php echo $this->getSkinUrl('images/');?>step1.png"/></td>
              <td class="title">How much do you need to borrow?</td>
              <td><div class="slide_calculator slide_style2">
                  <div class="slide_calculator_bg"></div>
                  <div id="change_bg_how_much" class="slide_calculator_bg slide_calculator_bg_belts" style="width: 110px;"></div>
                  <div class="news_root" id="news_root_how_much" style="left: 106px; top: 0px;">
                    <div class="handle handle_none" id="news_handle_how_much"></div>
                    <br>
                  </div>
                </div></td>
              <td class="homw_much">&pound;<span id="div_year_how_much">33,000</span> 
                <!--from £1000 - £50,000-->
                
                <input type="hidden" value="33000" class="cal-input" name="borrow_how_much" id="tt_how_much"/>
            </tr>
          </table>
        </div>
        <div class="border2"></div>
      </div>
      <div class="normal2">
        <div class="border2"></div>
        <div class="box2_c">
          <table class="list_t" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="step"><img src="<?php echo $this->getSkinUrl('images/');?>step2.png"/></td>
              <td class="title">How much do you want to deposit?</td>
              <td class="normal_td"><input type="text" name="deposit_how_much" class="input_pound cal-input" value=""/></td>
            </tr>
            <tr>
              <td class="step"></td>
              <td class="title"></td>
              <td class="normal_td infor_f"><img src="<?php echo $this->getSkinUrl('images/');?>gantan_blue.png"/> Leave blank if you don’t want to deposit anything</td>
            </tr>
          </table>
        </div>
        <div class="border2"></div>
      </div>
      <div class="normal2">
        <div class="border2"></div>
        <div class="box2_c">
          <table class="list_t" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="step"><img src="<?php echo $this->getSkinUrl('images/');?>step3.png"/></td>
              <td class="title title2">How many years do you want to make the repayment over?</td>
              <td class="normal_td moni_td"><div id="" tabindex="0" onclick="CoLeeSelect2(this)" class="moni_s quick_enquiry_moni_s years">
                  <input type="text" value="Please select An Option..." class="select6 required-entry cal-input" name="repayment_how_many" id="message_type2">
                  <ul style="display: none;" class="Option">
                    <li class=""><span>12 Months</span></li>
                    <li class=""><span>24 Months</span></li>
                    <li class=""><span>36 Months</span></li>
                    <li class=""><span>48 Months</span></li>
                    <li class=""><span>60 Months</span></li>
                    <li class=""><span>72 Months</span></li>
                  </ul>
                </div></td>
            </tr>
          </table>
        </div>
        <div class="border2"></div>
      </div>
      <div class="normal2">
        <div class="border2"></div>
        <div class="box2_c">
          <table class="list_t" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td  class="step"><img src="<?php echo $this->getSkinUrl('images/');?>step4.png"/></td>
              <td  class="title">Is it a new or used motorhome?</td>
              <td  class="normal_td used_car_td"><input checked name="is_new" type="radio" value="1" class="cal-input" onClick="hide_e('used_car_div')">
                <img src="<?php echo $this->getSkinUrl('images/');?>banner1.png"><span>New</span></td>
              <td class="normal_td used_car_td">&nbsp;&nbsp;&nbsp;&nbsp;
                <input name="is_new" type="radio" onClick="show_e('used_car_div')" class="cal-input" value="0">
                <img src="<?php echo $this->getSkinUrl('images/');?>banner1.png"><span>Used</span></td>
            </tr>
          </table>
        </div>
        <div id="used_car_div" class="used_car" >
          <table class="sider_t" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="td1">Ok great,  it's used... how old is it?</td>
              <td class="td2"><div class="slide_calculator slide_style2 finance_slide_example">
                  <div class="slide_calculator_bg" style="width: 232px;"></div>
                  <div id="change_bg_how_old" class="slide_calculator_bg slide_calculator_bg_finance_example" style="width: 132px;"></div>
                  <div class="news_root" id="news_root_how_old" style="left: 127px; top: 0px;">
                    <div class="handle handle_none2" id="news_handle_how_old"></div>
                    <!--1980 - 2011--> 
                    <br>
                  </div>
                </div>
                <input type="hidden" value="1998" id="tt_how_old"/></td>
              <td class="td3" id="div_year_how_old">1998</td>
            </tr>
          </table>
        </div>
        <div class="border2"></div>
      </div>
      <div class="normal2">
        <div class="border2"></div>
        <div class="box2_c">
          <table class="list_t" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="step"><img src="<?php echo $this->getSkinUrl('images/');?>step5.png"/></td>
              <td class="title">In your opinion, what is your current credit status?</td>
              <td class="normal_td moni_td" width="163" height="30"><div id="" tabindex="0" onclick="CoLeeSelect3(this)" class="moni_s quick_enquiry_moni_s years2">
                  <input type="text" value="Please select An Option..." class="cal-input select7" name="credit_status" id="message_type2">
                  <ul style="display: none;" class="Option">
                    <li class="very_poor" input_bg='select7_red'><span>It's Very Poor</span></li>
                    <li class="poor" input_bg='select7_orange'><span>It's Poor</span></li>
                    <li class="fair" input_bg='select7_yellow'><span>It's Fair</span></li>
                    <li class="good" input_bg='select7_green'><span>It's Good</span></li>
                    <li class="excellent" input_bg='select7_green_dark'><span>It's Excellent</span></li>
                  </ul>
                </div></td>
            </tr>
            <tr>
              <td colspan="3"><div class="credit">
                  <div class="credit_box">Most lenders would regard this score as low risk and would expect few people in this category to have serious problems with repaying credit.</div>
                </div></td>
            </tr>
            
              <td>
              <td colspan="3"><table width="auto" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td class="credit_td"><img src="<?php echo $this->getSkinUrl('images/');?>credit_expert.png"/></td>
                    <td  class="credit_td2"><a href="#">Click Here</a> to view your credit report FREE with Credit Expert from Experian</td>
                  </tr>
                </table></td>
            </tr>
          </table>
        </div>
        <div class="border2"></div>
      </div>
      <div class="normal2">
        <div class="border2"></div>
        <div class="box2_c finance_tip_div" >
          <table cellspacing="0" cellpadding="0" class="tip_table" id="finance1_tip_table" style="display: none;">
            <tbody>
              <tr>
                <td class="tip_top">&nbsp;</td>
              </tr>
              <tr>
                <td class="tip_center">Please be aware that this is only a finance example, we will need to contact you further to complete a more detailed finance quote. We will not serach your credit file until you give us permission over the phone or in person.</td>
              </tr>
              <tr>
                <td class="tip_bottom">&nbsp;</td>
              </tr>
            </tbody>
          </table>
          <table class="list_t" border="0" cellspacing="0" cellpadding="0" >
            <tr>
              <td class="step"><img src="<?php echo $this->getSkinUrl('images/');?>step6.png"/></td>
              <td class="title">Your personal finance example&nbsp;&nbsp;&nbsp;<img src="<?php echo $this->getSkinUrl('images/');?>gantan_blue.png" id="finance1_tip"></td>
              <td class="normal_td" height="30" align="right"><img src="<?php echo $this->getSkinUrl('images/');?>jisuanqi.png" ></td>
            </tr>
            <tr>
              <td colspan="3"><div class="example">
                  <table class="big_table_f" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="left_td"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td class="font1 td1">Borrowing<br/>
                              Amount</td>
                            <td class="font2" id="borrown_amount">£32,800</td>
                            <td class="font1">APR</td>
                            <td class="font2" ><span id="apr">7.99</span>%</td>
                            <td><a href="javascript:apr('-')"><img src="<?php echo $this->getSkinUrl('images/');?>bt_reduce.png"/></a><a href="javascript:apr('+')">&nbsp;<img src="<?php echo $this->getSkinUrl('images/');?>bt_add.png"/></a></td>
                          </tr>
                        </table>
                        <input type="hidden" id="apr_input" value="7.99" /></td>
                      <td class="right_td" id="total_amount_payable"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td class="font1 td2">Total Amount<br/>
                              Payable</td>
                            <td class="font2" id="total_payable">£39,525.05</td>
                          </tr>
                        </table></td>
                    </tr>
                  </table>
                </div></td>
            </tr>
            <tr>
              <td class="step"></td>
              <td colspan="2"><table width="577" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td class="title">Your Monthly Repayment</td>
                    <td align="right"><table class="repayment" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td class="td1" id="monthly-repayment">£1,097.03</td>
                          <td class="td2">Amount based on: <span id="monthly" style="font-size:11px;">36</span> month repayment plan</td>
                        </tr>
                      </table></td>
                  </tr>
                </table></td>
            </tr>
          </table>
        </div>
        <div class="border2"></div>
      </div>
      <div id="apply_now_div" class="normal2">
        <div class="border2"></div>
        <div class="box2_c">
          <h1 class="step7">Happy with the details above? Click apply now to give us your details and we will get back to you within 24H</h1>
          <table class="input_table s_t" cellspacing="0" cellpadding="0">
            <tr>
              <td><input name="" type="checkbox" value="" style="vertical-align:middle; width:15px;" >
                <span>I’d also like to recieve your newsletter</span></td>
              <td align="right"><input type="image" src="<?php echo $this->getSkinUrl('images/');?>bt_apply_now.png" onClick="hide_e('apply_now_div');show_e('submit_request_div')"/></td>
            </tr>
          </table>
          <div class="clearfloat"></div>
        </div>
        <div class="border2"></div>
      </div>
      <div id="submit_request_div" style="display:none">
      <form action="<?php echo $this->getUrl('contacts/index/financepost');?>" method="post" id="finance_cal_form">
        <div class="normal2">
          <div class="border2"></div>
          <div class="box2_c">
            <h1 class="step7">Please fill in your contact details below</h1>
            <table class="input_table" cellspacing="0" cellpadding="0">
              <tr>
                <th width="50%">Your Full Name</th>
                <th width="50%">Your Email Address</th>
              </tr>
              <tr>
                <td><input name="fullname" type="text" class="input2 required-entry" value=""></td>
                <td><input name="email" type="text" class="input2 validate-email" value=""></td>
              </tr>
            </table>
            <table class="input_table" cellspacing="0" cellpadding="0">
              <tr>
                <th width="50%">Your Telephone Number</th>
                <th width="50%">Your Current Status</th>
              </tr>
              <tr>
                <td><input name="telephone" type="text" class="input3_white required-entry" value=""></td>
                <td><img src="<?php echo $this->getSkinUrl('images/');?>gantan_blue.png"> <span>If your enquiry is very urgent we may telephone you</span></td>
              </tr>
            </table>
            <table class="input_table" cellspacing="0" cellpadding="0">
              <tr>
                <th colspan="3">Your Postal Address</th>
              </tr>
              <tr>
                <td colspan="3"><input name="postal1" type="text" class="input4_white required-entry" value=""></td>
              </tr>
              <tr class="second_tr">
                <td width="320"><input name="postal2" type="text" class="input5_white" value=""></td>
                <th width="105" align="left">&nbsp;&nbsp;Your Postcode</th>
                <td width="165"><input name="postcode" type="text" class="input6_white required-entry" value=""></td>
              </tr>
            </table>
            <div class="clearfloat"></div>
          </div>
          <div class="border2"></div>
        </div>
        <div class="normal2">
          <div class="border2"></div>
          <div class="box2_c">
            <h1 class="step8">Please click submit and we will get in touch with you shortly to discuss your personal finance example</h1>
            <table class="input_table s_t" cellspacing="0" cellpadding="0">
              <tr>
                <td><img src="<?php echo $this->getSkinUrl('images/');?>gantan_blue.png"><span>&nbsp;&nbsp;We will not credit search you, the quote is a finance example only</span></td>
                <td align="right" class="bt_td"><input type="image" src="<?php echo $this->getSkinUrl('images/');?>bt_submit_request.png" /></td>
              </tr>
            </table>
            <div class="clearfloat"></div>
          </div>
          <div class="border2"></div>
        </div>
        </form>
      </div>
    </div>
  </div>
  <div class="border3"><img src="<?php echo $this->getSkinUrl('images/');?>finance_bottom_bg.jpg"/></div>
</div>
<div class="newletter">
  <input class="input1" type="text" value="Enter Email Address..."/>
  <input type="image" src="<?php echo $this->getSkinUrl('images/');?>circle_sword.png" class="submit_sword" value="" />
</div>
<script language="javascript">		  
		var news_handle = document.getElementById("news_handle");
		var news_root   = document.getElementById("news_root");
		Drag.init(news_handle, news_root,-10,150,0,0);
		
		var news_handle_how_much = document.getElementById("news_handle_how_much");
		var news_root_how_much   = document.getElementById("news_root_how_much");
		Drag.init(news_handle_how_much, news_root_how_much,-2,162,0,0);
		
		var news_handle_how_old = document.getElementById("news_handle_how_old");
		var news_root_how_old   = document.getElementById("news_root_how_old");
		Drag.init(news_handle_how_old, news_root_how_old,-2,220,0,0);
		  
		</script>